<script >

import axios from "axios";

export default  {
  name: "Login",
  data() {
    return {
      sizeForm: {
        useraccount: '',
        userpsd: '',
        delivery: false,
        roleId: '1',
        type: [],
      },
      rules: {
        useraccount: [{required: true, message: "请输入账号", trigger: "blur"},
          {
            validator: (rule, value, callback) => {
              const reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/  //正则表达式 只能输入英文、汉字与数字
              if (!reg.test(value)) {
                callback(new Error('请勿输入特殊字符'))
              } else {
                callback()
              }
            }
          }
        ],
        userpsd: [{required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      //注册功能
      axios.post('/api/login', this.sizeForm).then(res => res.data).then(res => {
        console.log(res)
        //登陆成功后，跳转到相应页面
        if (res.code === 200) {
          if (this.sizeForm.roleId == 0) {
            window.location.href = "/admin/user/list";
          } else if (this.sizeForm.roleId == 1) {
            window.location.href = "/user/hotel/list";
          } else {

            window.location.href = "/designer/hotel/list";
          }
        } else if (res.code === 400) {
          alert("该账号未注册")//注册失败，返回注册页面
        } else {
          alert("密码错误")
        }
      })
    },
    register(){
      //指定跳转的地址
      this.$router.replace('/Register')
    }
  }
}
</script>

<template>
  <el-container class="login-container">
    <el-form
        :model="sizeForm"
        status-icon
        :rules="rules"
        ref="form"
        label-width="100px"
        margin="0 auto"
        class="login-form">
      <div class="LoginMes">登陆页面</div>

      <el-form-item label="账号" size="20px" prop="useraccount" >
        <el-input v-model="sizeForm.useraccount"
                  placeholder="请输入账号"
                  maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="密码" size="20px" prop="userpsd">
        <el-input v-model="sizeForm.userpsd"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="off"
                  maxlength="16"></el-input>
      </el-form-item>

      <el-form-item label="身份" prop="roleID">
        <div style="text-align: center">
          <el-radio v-model="sizeForm.roleId"  label="0">管理员</el-radio>
          <el-radio v-model="sizeForm.roleId"  label="1">用户</el-radio>
          <el-radio v-model="sizeForm.roleId"  label="2">设计师</el-radio>
        </div>
      </el-form-item>

      <el-form-item  style="text-align: center">
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button  @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<style  scoped>
.LoginMes {
  text-align: center;
  color: #f3730a;
  font-family: 幼圆;
  font-size: 30px;
  margin-bottom: 20px;
}
.login-container {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../assets/login3.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login-form {
  width: 480px;
  margin: 200px auto;
  background-color: rgb(143, 180, 229);
  padding: 50px;
  border-radius: 80px;
}

</style>
